import {h, ref} from "../../lib/guide-mini-vue.esm.js";

// @formatter:off
export const App = {
    name: "App",
    render() {
        return h(
            "div",
            {id: 'root',...this.props},
            [
                h('div', {}, "count:" + this.count),
                h('button', {onClick: this.onClick}, "click"),
                h('button', {onClick: this.onChangePropsDemo1}, "值改变了"),
                h('button', {onClick: this.onChangePropsDemo2}, "值变成undefined"),
                h('button', {onClick: this.onChangePropsDemo3}, "值被删除了"),
            ]
        )

    },
    setup() {
        const count = ref(0);

        const props = ref({
            foo:'foo',
            bar:'bar'
        })

        const onChangePropsDemo1 = ()=>{
            props.value.foo = 'new-foo';
        }
        const onChangePropsDemo2 = ()=>{
            props.value.foo = undefined;
        }
        const onChangePropsDemo3 = ()=>{
            props.value = {
                foo:'foo'
            }
        }



        const onClick = () => {
            count.value++
        }
        return {
            count,
            onClick,
            onChangePropsDemo1,
            onChangePropsDemo2,
            onChangePropsDemo3,
            props
        }
    }
}
// @formatter:on